import { defineComponent, h , ref} from 'vue'
import gameImage from '../../resource/assets/map.jpg'
import game  from '../Game'

export default defineComponent({
  setup(props, ctx) {
    let viewHeight = 1080
    let step = 1;
    let mapY1 = ref(0)
    let mapY2 = ref(-viewHeight)

    game.ticker.add(()=> {
      mapY1.value+=step
      mapY2.value+=step
      if (mapY1.value>=viewHeight) {
        mapY1.value = -viewHeight
      }
      if (mapY2.value>=viewHeight) {
        mapY2.value = -viewHeight
      }
    })

    return {
      mapY1,
      mapY2
    }
  },
  render(ctx) {
    return  h('Container', [ 
      h('Sprite', {texture: gameImage, y: ctx.mapY1 }),
      h('Sprite', {texture: gameImage, y: ctx.mapY2 })
    ])
  }
})